<template>
  <div>
    <!-- 头部 -->
    <div class="top_header">
      <div class="container">
        <div class="header_box row">
          <div class="logo col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <img src="/img/logo.png" alt />
          </div>
          <div class="shouye col-lg-6 col-md-6 col-sm-6 hidden-xs">
            <a href="javascript:;">首页</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="banner">
      <div class="bg">
        <div class="row">
          <div class="col-md-6 col-sm-5"></div>
          <div class="pull-right col-sm-7 col-md-5 col-xs-12">
            <div class="panel panel-default panel_wz" style="background-color:#fff">
              <div class="panel-body">
                <!-- 表单头部 -->
                <ul class="nav nav-tabs form_top">
                  <li role="presentation" class="active form_top_a">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">密码登录</a>
                  </li>
                  <li role="presentation" class="form_top_a">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">手机登录</a>
                  </li>
                </ul>
                <!-- 表单内容 id="home"-->
                <div class="tab-content">
                  <!-- 密码登录 -->
                  <div role="tabpanel" class="tab-pane active" id="home">
                    <div class="form_box2">
                      <div class="form-group form_body">
                        <form :model="queryInfo" :rules="LoginFormrules" ref="LoginformRef">
                          <label for="exampleInputEmail1">
                            <input
                              @blur="unamerules"
                              v-model="queryInfo.username"
                              type="text"
                              id="exampleInputEmail1"
                              placeholder="请输入账号"
                            />
                          </label>
                          <label for="exampleInputPassword1">
                            <input
                              @blur="unamerules"
                              v-model="queryInfo.password"
                              type="password"
                              id="exampleInputPassword1"
                              placeholder="请输入密码"
                            />
                          </label>
                          <button class="confirm_byn" @click="getqueryInfo()">登录</button>
                        </form>
                        <div class="f_span">
                          <a class="f_l" href="javascript:;">忘记密码</a>
                          <a class="f_r" href="javascript:;">免费注册</a>
                        </div>
                        <p class="from_footer">
                          <span>其他方式登录</span>
                          <a href>
                            <img class="qq" src="/img/QQ.png" alt />
                            <span>QQ登录</span>
                          </a>
                          <a href>
                            <img class="wchat" src="/img/微信.png" alt />
                            <span>微信登录</span>
                          </a>
                          <a href>
                            <img class="wibo" src="/img/微博.png" alt />
                            <span>微博登录</span>
                          </a>
                        </p>
                        <div class="from_footer2">
                          <div class="text_center">
                            <span class="line"></span>
                            <span class="other">其他方式登录</span>
                            <span class="line2"></span>
                            <!-- <div class="line"></div> -->
                          </div>
                          <div class="d_flex f_bottom">
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/QQ@2x.png" alt />
                              <span class="d_block">QQ登录</span>
                            </a>
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/微信@2x.png" alt />
                              <span class="d_block">微信登录</span>
                            </a>
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/微博@2x.png" alt />
                              <span class="d_block">微博登录</span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 手机号登录 -->
                  <div role=" tabpanel" class="tab-pane" id="profile">
                    <div class="form_box2">
                      <div class="form_body">
                        <form :model="queryInfo" :rules="LoginFormrules" ref="LoginformRef">
                          <label for>
                            <input
                              @blur="phoneules"
                              v-model="queryInfo.phone"
                              type="text"
                              id
                              placeholder="请输入手机号"
                            />
                          </label>
                          <label class="yz_label" for>
                            <input
                              @blur="phoneules"
                              v-model="queryInfo.securitycode"
                              type="text"
                              id
                              placeholder="请输入验证码"
                            />
                            <button class="yz_button">发送验证码</button>
                          </label>
                          <button class="confirm_byn" @click="getqueryInfo">登录</button>
                        </form>
                        <div class="f_span">
                          <a class="f_l" href="javascript:;">忘记密码?</a>
                          <a class="f_r" href="javascript:;">免费注册</a>
                        </div>
                        <p class="from_footer">
                          <span>其他方式登录</span>
                          <a href>
                            <img class="qq" src="/img/QQ.png" alt />
                            <span>QQ登录</span>
                          </a>
                          <a href>
                            <img class="wchat" src="/img/微信.png" alt />微信登录
                            <span></span>
                          </a>
                          <a href>
                            <img class="wibo" src="/img/微博.png" alt />
                            <span>微博登录</span>
                          </a>
                        </p>
                        <div class="from_footer2">
                          <div class="text_center">
                            <span class="line"></span>
                            <span class="other">其他方式登录</span>
                            <span class="line2"></span>
                            <!-- <div class="line"></div> -->
                          </div>
                          <div class="d_flex f_bottom">
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/QQ@2x.png" alt />
                              <span class="d_block">QQ登录</span>
                            </a>
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/微信@2x.png" alt />
                              <span class="d_block">微信登录</span>
                            </a>
                            <a class="flex_1" href="javascript:;">
                              <img src="/img/微博@2x.png" alt />
                              <span class="d_block">微博登录</span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <footer class="footer">
      <div class="container">
        <div class="row hidden-xs footer_row1 " style="padding: 35px 100px;">
          <div class="col-md-3 footer_font">
            <img class="footer_font_1" src="/img/person.jpg" alt />
            <div class="footer_font_2">
              <div class="font_12">售前咨询热线</div>
              <div style="color:#C4C1C4;font-size:16px;">400-0000-0000</div>
            </div>
          </div>
          <div class="col-md-3 font_center">
            <div class="font_16">网站导航</div>
            <div class="font_12">首页</div>
            <div class="font_12">排行</div>
            <div class="font_12">朋友圈</div>
          </div>
          <div class="col-md-3 font_center">
            <div class="font_16">关注网站</div>
            <div class="font_12">电话: 400</div>
            <div class="font_12">游戏: 400@qq.com</div>
            <div class="font_12">地址: 成都市</div>
          </div>
          <div class="col-md-3 font_center">
            <img src="/img/scanCode.jpg" alt />
            <div class="font_12" style="margin-left: 4px;">关注公众号</div>
          </div>
        </div>
        <div class="row  footer_row2 hidden-md hidden-lg hidden-sm" style="padding: 0 35px;">
          <div class="row">
            <div class="col-xs-12 footer_font" style="padding:0 50px; ">
              <img style="display:inline-block" src="/img/person.jpg" alt />
              <div
                style="display:inline-block; margin-top:20px;margin-left: 15px; text-align:center;"
              >
                <div class="font_12">售前咨询热线</div>
                <div style="color:#C4C1C4;font-size:16px;">400-0000-0000</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-4 font_center">
              <div class="font_16">网站导航</div>
              <div class="font_12">首页</div>
              <div class="font_12">排行</div>
              <div class="font_12">朋友圈</div>
            </div>
            <div class="col-xs-4 font_center">
              <div class="font_16">关注网站</div>
              <div class="font_12">电话: 400</div>
              <div class="font_12">游戏: 400@qq.com</div>
              <div class="font_12">地址: 成都市</div>
            </div>
            <div class="col-xs-4 font_center">
              <img src="/img/scanCode.jpg" alt />
              <div class="font_12" style="margin-left: 4px;">关注公众号</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_p" id="di" style="border-top: 1px #575656 solid;">
        <p>
          Copyright©2006～2019 成都吉胜科技有限责任公司版权所有 .
          <a
            href="http://sc.beian.miit.gov.cn"
            target="_blank"
            rel="noopener noreferrer"
            style="color: #757474"
          >蜀ICP备05001520号-1</a>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?COLLCC=1646148670&amp;recordcode=51019002001639"
            target="_blank"
            style="color: #757474"
          >
            <img src="/resources/img/beian.png" alt />川公网安备
            51019002001639号
          </a>
        </p>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      queryInfo: {
        username: '',
        password: '',
        phone: '',
        securitycode: ''
      },
      // 表单验证规则
      LoginFormrules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    // 获取用户信息 并登录
    async getqueryInfo () {
      // this.$refs.LoginformRef.validate((valid) => {
      // 表单验证数据不起效果
      console.log(this.$refs.LoginformRef)
      // })

      const { data: res } = await this.$http.get('http://api.cms.liulongbin.top/weblogin')
      console.log(res)
      if (res.meta.status !== 200) {
        this.$message.error('获取用户数据失败！')
      } else {
        if (this.queryInfo.username !== res.data.username || this.queryInfo.password !== res.data.password) {
          this.$message.error('用户名或密码输入不正确')
        } else {
          this.$message.success('登录成功！')
          location.href = 'http://localhost:8080/#/member'
        }
        // 手机端登录
        if (this.queryInfo.phone !== res.data.phone || this.queryInfo.securitycode !== res.data.securitycode) {
          this.$message.error('手机号或验证码输入不正确！')
        } else {
          this.$message.success('登录成功！')
          location.href = 'http://localhost:8080/#/member'
        }
      }
    },

    // 验证规则
    unamerules () {
      const uname = this.queryInfo.username.trim()
      const upassword = this.queryInfo.password.trim()
      // eslint-disable-next-line no-constant-condition
      if (uname.length === 0) {
        return this.$message.error('请输入用户名!')
      } else if (uname.length < 3 || uname.length > 15) {
        return this.$message.error('长度在 3 到 15 个字符!')
      } else if (upassword.length === 0) {
        return this.$message.error('请输入密码!')
      } else if (upassword.length < 3 || upassword.length > 15) {
        return this.$message.error('长度在 6 到 15 个字符!')
      }

      // passwordrules () {

      // }
    },
    // 手机登录验证规则
    phoneules () {
      const uphone = this.queryInfo.phone.trim()
      const usecuritycode = this.queryInfo.securitycode.trim()
      const reg = /^1[3456789]\d{9}$/
      // eslint-disable-next-line no-constant-condition
      if (uphone.length === 0) {
        return this.$message.error('请输入手机号!')
      } else if (!reg.test(uphone)) {
        return this.$message.error('手机号格式输入不正确')
      } else if (usecuritycode.length === 0) {
        return this.$message.error('请输入验证码!')
      }
    }
  }
}
</script>
<style lang="less" scoped>
// scoped不加style 是全局生效  加上是当前组件生效
//只要是定义单文件组件 就应该加上scoped 阻止组件之间的样式冲突
</style>
